// 数据驱动思维；
		// 数据优先;
		var data = [
			{
				pname: "飞利浦新安怡卡通企鹅杯学饮杯7安士200ml 训练水杯 防漏带手柄（2件装）",
				price: 59.88,
				num: 1,
				ischecked: false,
				img: "img/images/20150708112148lm2t0.jpg"
			},
			{
				pname: "日本Merries花王新生儿纸尿裤S82",
				price: 388.5,
				num: 1,
				ischecked: false,
				img: "img/images/201509091748430829.jpg"
			},
			{
				pname: "Sony/索尼 DSC-WX300",
				price: 148.5,
				num: 1,
				ischecked: false,
				img: "img/images/3.jpg"
			}, {
				pname: "韩国MOMMA手工陶瓷奶瓶（220ml,320ml）+保温夜光喂奶灯套装 多款颜色图案随机发货",
				price: 640.6,
				num: 1,
				ischecked: false,
				img: "img/images/201608081427026196.jpg"
			},

		];



		// 根据数据渲染 视图；
		renderDom(data);
		// 和所有的视图操作有关；
		function renderDom(data) {
			var tbody = document.querySelector("tbody");
			tbody.innerHTML = "";
			data.forEach(function (item) {
				var trEle = document.createElement("tr");
				if (item.ischecked) {
					var isCheckStr = `<input class="check-one check" checked  type="checkbox" />`;
				} else {
					var isCheckStr = `<input class="check-one check"   type="checkbox" />`;
				}

				// 通过数据来判断是否有减号 
				// if(item.num<=1){
				// 	var minus = `<span class="reduce"></span>`;
				// }else{
				// 	var minus = `<span class="reduce">-</span>`;
				// }

				// ${}--->插值表达式，可以接收简单的运算和逻辑(三元运算符)  {{}}--》{}---》{$str};
				// `fdsafda`--->模板字符串；
				trEle.innerHTML = `<td class="checkbox">
						${isCheckStr}
					</td>
					<td class="goods"><img src="${item.img}"
							alt="" /><span>${item.pname}</span></td>
					<td class="price">${item.price}</td>
					<td class="count">${item.num <= 1 ? '<span class="reduce"></span>' : '<span class="reduce">-</span>'}<input class="count-input" type="text"
							value="${item.num}" /><span class="add">+</span></td>
					<td class="subtotal">${item.price * item.num}</td>
					<td class="operation"><span class="delete">删除</span></td>`;
				tbody.appendChild(trEle);
			})
			// 从新添加点击事件；
			addEvent();
		}


		// 添加数量操作
		// 先操作数据，然后再渲染视图
		function addEvent() {
			// 添加数量操作
			var addEles = document.querySelectorAll(".add");
			addEles.forEach(function (item, key) {
				item.onclick = function () {
					// console.log(key);
					data[key].num += 1;
					console.log(data);
					renderDom(data);
					countTotal()
				}
			})

			// 减少数量
			var minusEles = document.querySelectorAll(".reduce");

			minusEles.forEach(function (item, key) {
				item.onclick = function () {
					// 先操作数据
					if (data[key].num > 1) {
						data[key].num -= 1;

						//渲染视图；
						renderDom(data);
						countTotal()
					}
				}
			})


			// 删除操作
			// 先删除数据，在渲染视图
			var deleteEles = document.querySelectorAll(".delete");
			deleteEles.forEach(function (item, key) {
				item.onclick = function () {
					// 先删除数据；
					data.splice(key, 1);
					console.log(data);
					renderDom(data);
					countTotal()
				}
			})


			// 单选和全选 
			var checkOneEles = document.querySelectorAll(".check-one");
			checkOneEles.forEach(function (item, key) {
				item.onclick = function () {
					
					// console.log(this.checked);
					data[key].ischecked = this.checked;
					console.log(data);
					// 判断是否全选 
					var res = data.every(function (item) {
						return item.ischecked;
					})
					console.log(res);
					// 放在数据修改了之后 在调用计算的方法；
					countTotal();
					// 修改全选的状态
					var checkAllEles = document.querySelectorAll(".check-all");
					checkAllEles.forEach(function (item) {
						item.checked = res;
					})
				}
			})



			// 删除勾选的内容
			// 持久化保存
			var delEle = document.querySelector("#deleteAll");
			delEle.onclick = function () {
				// 删除数据
				// 数据筛选 
				var res = data.filter(function (item) {
					return item.ischecked == false;
				})
				data = res;
				if(data.length==0){
					var checkAllEles = document.querySelectorAll(".check-all");
					checkAllEles.forEach(function (item) {
						item.checked = false;
					})
				}
				// console.log(res);
				renderDom(res);
			}



			// 计算勾选数量 和 总价 
			function countTotal(){
				// 计算数据 
				// 产品数量
				var num = 0;
				var total = 0;
				data.forEach(function(item){
					if(item.ischecked){
						num += item.num;
						var subTotal = item.num * item.price;
						total+=subTotal;
					}
				})
				console.log(total);
				// 更改视图；
				document.querySelector("#selectedTotal").innerHTML = num;

				document.querySelector("#priceTotal").innerHTML = total;

				// 计算总价 

				

				
			}


			// 点击全选 每一个产品勾选上
			var checkAllEles = document.querySelectorAll(".check-all");
			checkAllEles.forEach(function(item){
				item.onclick = function(){
					// 需要把所有的checked 都改成和全选一样的状态；
					// 先修改数据
					var that = this;
					data.forEach(function(item){
						item.ischecked = that.checked;
					})
					// 把2个全选按钮的状态改成一致；
					checkAllEles.forEach(function(item){
						item.checked = that.checked;
					})

					renderDom(data);
				}
			})

		}




// 把数据操作和视图操作分离开 
// 事件操作分开 
// 1.数据操作 2.视图操作 3.事件操作；